<!doctype html>
<html lang="zh-CN">

<head>
  <!-- 必须的 meta 标签 -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap 的 CSS 文件 -->
  <link href="./css/bootstrap@5.1.3/bootstrap.min.css" rel="stylesheet">

  <title></title>
  <style>
    .login_block {
      border: 1px solid #ccc;
      padding: 30px 25px;
      border-radius: 5px;
      box-shadow: 1px 1px 2px burlywood;
    }
  </style>
</head>

<body>
<!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->
<!-- 选项 1：包含 Popper 的 Bootstrap 集成包 -->
<script src="./js/bootstrap@5.1.3/bootstrap.bundle.min.js"></script>

<!-- 页面导航 -->
<script src="./js/nav.js"></script>
<!-- /页面导航 -->

<!-- 登录页面 -->
<div class="container mt-5">
  <div class="row justify-content-center">
    <div class="col-xs-12 col-sm-8 cl-md-4 login_block">
      <form action="index.html" id="loginForm">
        <div class="mb-3">
          <label for="usernameInput" class="form-label visually-hidden">用户名</label>
          <input type="text" class="form-control" id="usernameInput" aria-describedby="emailHelp">
          <div id="emailHelp" class="form-text">请输入用户名ss</div>
        </div>
        <div class="mb-3 mt-4">
          <label for="passwordInput" class="form-label visually-hidden">密码</label>
          <input type="password" class="form-control" id="passwordInput">
          <div id="pwdHelp" class="form-text d-flex justify-content-between">
            <span>请输入密码</span>
            <a href="regist.html">注册</a>
          </div>
        </div>
        <button type="submit" class="btn btn-primary w-100">登录</button><!-- 此处加了 id="submitBtn"-->
      </form>
    </div>
  </div>
</div>

<!--//消息框-->
<div class="position-absolute top-50 start-50 translate-middle-x">
  <div id="liveToast" data-bs-delay="1500" class="toast text-white bg-danger by-opacity-75" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
      <div class="toast-body">

      </div>
      <button type="button" class="btn-close btn-close-white me-2 mt-auto" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
  </div>
</div>
<!-- 页面登录 -->

<!-- 引入just-validate库 -->
<script src="./js/just-validate@3.8.1/just-validate.production.min.js"></script>
<script>
  //1.构建JustValidat实例对象
  const validation = new JustValidate("#loginForm", {
    errorFieldCssClass: 'is-invalid',
    errorLableStyle: {
      fontSize: '14px',
      color: '#dc3545',
    },
    successFieldCssClass: 'is-valid',
    successLabelStyle: {
      fontSize: '14px',
      color: '#20b418'
    },
    focusInvalidField: true,
    lockForm: true,
  });

  //2.设定表单空键的规则
  validation.addField('#usernameInput', [
            {
              rule: 'required',//必须填写
              errorMessage: '用户名必须填写'
            }
          ])
          .addField('#passwordInput', [
            {
              rule:  'minLength',
              value: 6,
              errorMessage: '密码长度不能少于6位'
            }
          ])
          .onSuccess((ev) => {
            //检验成功之后，如何进行处理
            ev.preventDefault();
            console.log("---loginForm onSuccess---");
            let username=document.querySelector("#usernameInput").value;
            let pwd=document.querySelector("#passwordInput").value;
            let user={"username":username,"pwd":pwd};
            //发送异步请求
            fetch("login.user",{
              method:"POST",
              headers:{
                'Content-Type':'application/json',
              },
              body:JSON.stringify(user)
            }).then(response=>response.json()).then(data=> {
              if(data.flag){
                //将用户消息存在SessionStorage
                sessionStorage.setItem("user",JSON.stringify(user));
                location.href="index.html";
              }else{
               var toasLiveExample=document.getElementById("liveToast");
               var toast=new bootstrap.Toast(toasLiveExample);
               let toasBody=document.querySelector("#liveToast,toast-body");
               toasBody.innerHTML=data.message;
               toast.show();
              }
            });
          });
</script>
</body>

</html>